<!doctype html>
<title>HTML Test: dir=auto|rtl with slots, and direction should be RTL</title>
<meta charset="UTF-8">
<meta name="author" title="Miyoung Shin" href="mailto:myid.shin@igalia.com">
<meta name="author" title="L. David Baron" href="mailto:dbaron@chromium.org">
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute"/>
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="dir-shadow-utils.js"></script>

<div></div>

<script>

test(() => {
  let [tree, shadow] = setup_tree(`
    <div>
      <div id="root">
        <span></span>
      </div>
    </div>
  `,`
    <slot dir="rtl"></slot>
  `);
  let span = tree.querySelector("span");
  assert_equals(getComputedStyle(span).direction, "rtl");
  assert_equals(html_direction(span), "ltr");
  tree.remove();
}, 'Slots: Directionality: dir=rtl on slot');

test(() => {
  let [tree, shadow] = setup_tree(`
    <div>
      <div id="root" dir="rtl"></div>
    </div>
  `,`
    <span></span>
  `);
  let span = shadow.querySelector("span");
  assert_equals(getComputedStyle(span).direction, "rtl");
  assert_equals(html_direction(span), "rtl");
  tree.remove();
}, 'Slots: Directionality: dir=rtl on host');

test(() => {
  let [tree, shadow] = setup_tree(`
    <div>
      <span id="root" dir="auto"></span>
    </div>
  `,`
    اختبر
  `);
  let span = tree.querySelector("span");
  assert_equals(getComputedStyle(span).direction, "ltr");
  assert_equals(html_direction(span), "ltr");
  tree.remove();
}, 'Slots: Directionality: dir=auto on host with Arabic shadow tree content');

test(() => {
  let [tree, shadow] = setup_tree(`
    <div>
      <div id="root">
        اختبر
      </div>
    </div>
  `,`
    <span dir="auto">
      <slot></slot>
    </span>
  `);
  let span = shadow.querySelector("span");
  assert_equals(getComputedStyle(span).direction, "ltr");
  assert_equals(html_direction(span), "ltr");
  tree.remove();
}, 'Slots: Directionality: dir=auto in shadow tree with Arabic light tree content');

test(() => {
  let [tree, shadow] = setup_tree(`
    <div>
      <div id="root"></div>
    </div>
  `,`
    <span dir="auto">
      <slot>
        اختبر
      </slot>
    </span>
  `);
  let span = shadow.querySelector("span");
  assert_equals(getComputedStyle(span).direction, "ltr");
  assert_equals(html_direction(span), "ltr");
  tree.remove();
}, 'Slots: Directionality: dir=auto in shadow tree with Arabic shadow tree content');

test(() => {
  let [tree, shadow] = setup_tree(`
    <div>
      <div id="root">
        اختبر
      </div>
    </div>
  `,`
    <slot dir="auto"></slot>
  `);
  let slot = shadow.querySelector("slot");
  assert_equals(getComputedStyle(slot).direction, "rtl");
  assert_equals(html_direction(slot), "rtl");
  tree.remove();
}, 'Slots: Directionality: dir=auto on slot with Arabic light tree content');

test(() => {
  let [tree, shadow] = setup_tree(`
    <div>
      <div id="root" dir="rtl"></div>
    </div>
  `,`
    <section dir="ltr">
      <div dir="auto">
        <slot></slot>
        A
      </div>
    </section>
  `);
  let div = shadow.querySelector("div");
  assert_equals(html_direction(div), "rtl");
  tree.remove();
}, 'slot provides its directionality (from host) to a dir=auto container');

test(() => {
  let [tree, shadow] = setup_tree(`
    <div>
      <div id="root"></div>
    </div>
  `,`
    <div dir="auto">
      <span dir="ltr">
        A
      </span>
      \u05D0
    </div>
    <slot></slot>
  `);
  let div = shadow.querySelector("div");
  assert_equals(html_direction(div), "rtl");
  tree.remove();
}, 'children with dir attribute are skipped by dir=auto');

test(() => {
  let [tree, shadow] = setup_tree(`
    <div>
      <div id="root"></div>
    </div>
  `,`
    <div dir="auto"><slot dir="ltr"></slot>\u05D0</div>
  `);
  let div = shadow.querySelector("div");
  assert_equals(html_direction(div), "rtl");
  tree.remove();
}, 'slot with dir attribute is skipped by dir=auto');

test(() => {
  let [tree, shadow] = setup_tree(`
    <div>
      <div id="root" dir="auto">
        <div dir="ltr">اختبر</div>
        <span>Text</span>
      </div>
    </div>
  `,`
    <slot dir="auto"></slot>
  `);
  let div = tree.querySelector("#root");
  assert_equals(html_direction(div), "ltr");
  let slot = shadow.querySelector("slot");
  assert_equals(html_direction(slot), "rtl");
  tree.remove();
}, 'dir=auto slot ignores dir attribute of assigned nodes');

test(() => {
  let [tree, shadow] = setup_tree(`
    <div>
      <div id="root">
        <bdi class="name">اختبر</bdi>
      </div>
    </div>
  `, `
    <slot dir="auto"></slot>
  `);
  let slot = shadow.querySelector("slot");
  assert_equals(html_direction(slot), "rtl");
  tree.remove();
}, 'dir=auto slot considers text in bdi assigned nodes');

test(() => {
  let [tree, shadow] = setup_tree(`
    <div>
      <div id=root>
        <input value="اختبر">
      </div>
    </div>
  `,`
    <slot dir=auto></slot>
  `);
  let inp = tree.querySelector("input");
  assert_equals(html_direction(inp), "ltr");
  let slot = shadow.querySelector("slot");
  assert_equals(html_direction(slot), "rtl");
  tree.remove();

  [tree, shadow] = setup_tree(`
    <div>
      <div id=root>
        <input value=" ">
        اختبر
      </div>
    </div>
  `,`
    <slot dir=auto></slot>
  `);
  inp = tree.querySelector("input");
  assert_equals(html_direction(inp), "ltr");
  slot = shadow.querySelector("slot");
  assert_equals(html_direction(slot), "ltr", "no strong character in value counts as ltr");
  tree.remove();
}, 'dir=auto slot considers text in value of input element children');

</script>
